<template>
  <div v-if="show" class="toast toast-top toast-end">
    <div class="alert" :class="alertClass">
      <span>{{ message }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const props = defineProps<{
  type?: 'success' | 'error' | 'warning' | 'info'
  message: string
  duration?: number
}>()

const show = ref(false)
const alertClass = computed(() => {
  switch (props.type) {
    case 'success':
      return 'alert-success'
    case 'error':
      return 'alert-error'
    case 'warning':
      return 'alert-warning'
    case 'info':
      return 'alert-info'
    default:
      return ''
  }
})

onMounted(() => {
  show.value = true
  setTimeout(() => {
    show.value = false
  }, props.duration || 3000)
})
</script>
